Cypress: Най-доброто ръководство за E2E тестване на уеб приложения

В днешния бързо развиващ се пейзаж на уеб разработката, гарантирането на качеството и надеждността на уеб приложенията е от първостепенно значение. End-to-End (E2E) тестването играе решаваща роля за проверка дали всички компоненти на едно приложение работят безпроблемно заедно от гледна точка на потребителя. Cypress се превърна във водеща E2E тестова рамка, предлагаща приятелско изживяване за разработчиците, мощни функции и отлична производителност. Това изчерпателно ръководство ще ви преведе през всичко, което трябва да знаете, за да започнете с Cypress и ефективно да тествате вашите уеб приложения.

Какво е Cypress?

Cypress е фронтенд тестови инструмент от следващо поколение, създаден за модерния уеб. За разлика от традиционните тестови рамки, които изпълняват тестове в браузър, Cypress работи директно в браузъра, давайки ви несравним контрол и видимост върху поведението на вашето приложение. Той е проектиран да бъде бърз, надежден и лесен за използване, което го прави популярен избор сред разработчици и QA инженери по целия свят. Cypress е написан на JavaScript и се изпълнява в браузъра, което го прави много производителен и предлага несравним достъп до вътрешността на приложението.

Ключови предимства от използването на Cypress

• Приятелски настроен към разработчиците: Cypress предоставя чист и интуитивен API, което улеснява писането и дебъгването на тестове.
• Пътуване във времето: Cypress прави снимки на състоянието на вашето приложение по време на всяка тестова команда, което ви позволява да се върнете назад във времето и да видите точно какво се е случило във всеки момент.
• Презареждане в реално време: Cypress автоматично се презарежда, когато правите промени в тестовете си, осигурявайки незабавна обратна връзка.
• Автоматично изчакване: Cypress автоматично изчаква елементите да станат видими или интерактивни, преди да извърши действия, елиминирайки нуждата от изрични изчаквания.
• Мрежов контрол: Cypress ви позволява да заглушавате мрежови заявки и отговори, което ви позволява да симулирате различни сценарии и да тествате обработката на грешките на вашето приложение.
• Възможност за дебъгване: Cypress предоставя отлични инструменти за дебъгване, включително мощен дебъгер и подробни съобщения за грешки.
• Тестване между браузъри: Cypress поддържа множество браузъри, включително Chrome, Firefox, Edge и Electron.
• Тестване без глава (Headless): Изпълнявайте тестове в режим без глава за по-бързо изпълнение в CI/CD среди.
• Вградени твърдения: Cypress предоставя богат набор от вградени твърдения за проверка на очакваното поведение на вашето приложение.

Инсталация и настройка

Започването с Cypress е лесно. Ето как да го инсталирате:

1. Предварителни изисквания: Уверете се, че имате инсталирани Node.js и npm (Node Package Manager) на вашата система. Можете да ги изтеглите от официалния уебсайт на Node.js.
2. Инсталиране на Cypress: Отворете вашия терминал или команден ред, навигирайте до директорията на вашия проект и изпълнете следната команда:

            npm install cypress --save-dev
            

              
                Copy
              
            
          

3. Отваряне на Cypress: След като инсталацията приключи, можете да отворите Cypress Test Runner, като изпълните:

            npx cypress open
            

              
                Copy
              
            
          

Тази команда ще стартира Cypress Test Runner, който предоставя графичен интерфейс за изпълнение и дебъгване на вашите тестове.

Писане на първия ви Cypress тест

Нека създадем прост тест, за да проверим дали началната страница на уебсайт се зарежда правилно. Създайте нов файл с име `example.cy.js` в директорията `cypress/e2e` на вашия проект.

            
// cypress/e2e/example.cy.js

describe('My First Test', () => {
  it('Visits the Kitchen Sink', () => {
    cy.visit('https://example.cypress.io')
    cy.contains('type').click()
    cy.url().should('include', '/commands/actions')

    cy.get('.action-email')
      .type('fake@email.com')
      .should('have.value', 'fake@email.com')
  })
})

            

              
                Copy
              
            
          

Нека разгледаме този тест:

• `describe()`: Дефинира тестова група, която е колекция от свързани тестове.
• `it()`: Дефинира отделен тестов случай в тестовата група.
• `cy.visit()`: Навигира до посочения URL.
• `cy.contains()`: Намира елемент, съдържащ посочения текст.
• `.click()`: Клика върху избрания елемент.
• `cy.url()`: Получава текущия URL на страницата.
• `.should()`: Прави твърдение за състоянието на приложението.
• `cy.get()`: Избира елемент, използвайки CSS селектор.
• `.type()`: Въвежда текст в избрания елемент.
• `.should('have.value', 'fake@email.com')`: Твърди, че стойността на елемента е равна на 'fake@email.com'.

Изпълнете този тест в Cypress Test Runner, за да го видите в действие. Трябва да видите как браузърът се навигира до уебсайта Cypress Kitchen Sink, кликва върху връзката "type" и проверява URL адреса.

Cypress команди

Cypress предоставя широк набор от команди за взаимодействие с вашето приложение. Ето някои от най-често използваните команди:

• `cy.visit(url)`: Навигира до посочения URL.
• `cy.get(selector)`: Избира елемент, използвайки CSS селектор.
• `cy.contains(content)`: Избира елемент, съдържащ посочения текст.
• `cy.click()`: Клика върху избрания елемент.
• `cy.type(text)`: Въвежда текст в избрания елемент.
• `cy.clear()`: Изчиства съдържанието на поле за въвеждане или текстова област.
• `cy.submit()`: Изпраща форма.
• `cy.check()`: Маркира падащ списък или радио бутон.
• `cy.uncheck()`: Маха маркировката от падащ списък.
• `cy.select(value)`: Избира опция от падащ списък.
• `cy.scrollTo(position)`: Превърта страницата до посочената позиция.
• `cy.trigger(event)`: Изпълнява DOM събитие върху избрания елемент.
• `cy.request(url, options)`: Прави HTTP заявка към посочения URL.
• `cy.intercept(route, handler)`: Прихваща HTTP заявки, отговарящи на посочения маршрут.
• `cy.wait(time)`: Изчаква посоченото време.
• `cy.reload()`: Презарежда текущата страница.
• `cy.go(direction)`: Навигира до предишната или следващата страница в историята на браузъра.
• `cy.url()`: Получава текущия URL на страницата.
• `cy.title()`: Получава заглавието на страницата.
• `cy.window()`: Получава обекта на прозореца.
• `cy.document()`: Получава обекта на документа.
• `cy.viewport(width, height)`: Задава размера на изгледа.

Това са само част от многото команди, налични в Cypress. Обърнете се към документацията на Cypress за пълен списък с команди и техните опции.

Твърдения в Cypress

Твърденията се използват за проверка на очакваното поведение на вашето приложение. Cypress предоставя богат набор от вградени твърдения, които можете да използвате, за да проверявате състоянието на елементи, URL адреса, заглавието и други. Твърденията се свързват след Cypress командите чрез метода `.should()`.

Ето някои често срещани примери за твърдения:

• `.should('be.visible')`: Твърди, че елементът е видим.
• `.should('not.be.visible')`: Твърди, че елементът не е видим.
• `.should('be.enabled')`: Твърди, че елементът е активиран.
• `.should('be.disabled')`: Твърди, че елементът е деактивиран.
• `.should('have.text', 'очакван текст')`: Твърди, че елементът има посочения текст.
• `.should('contain', 'очакван текст')`: Твърди, че елементът съдържа посочения текст.
• `.should('have.value', 'очаквана стойност')`: Твърди, че елементът има посочената стойност.
• `.should('have.class', 'очакван клас')`: Твърди, че елементът има посочения клас.
• `.should('have.attr', 'име на атрибут', 'очаквана стойност')`: Твърди, че елементът има посочения атрибут и стойност.
• `.should('have.css', 'css свойство', 'очаквана стойност')`: Твърди, че елементът има посоченото CSS свойство и стойност.
• `.should('have.length', очаквана дължина)`: Твърди, че елементът има посочената дължина (например, броят елементи в списък).

Можете също така да създавате персонализирани твърдения, за да отговорите на вашите специфични нужди.

Най-добри практики за писане на Cypress тестове

Следването на най-добрите практики може да ви помогне да пишете по-поддържаеми, надеждни и ефективни Cypress тестове. Ето някои препоръки:

• Пишете ясни и кратки тестове: Всеки тест трябва да се фокусира върху конкретна функционалност или сценарий. Избягвайте писането на прекалено сложни тестове, които са трудни за разбиране и поддръжка.
• Използвайте смислени имена на тестове: Давайте на тестовете си описателни имена, които ясно показват какво тестват.
• Избягвайте кодиране на стойности (Hardcoding): Използвайте променливи или конфигурационни файлове, за да съхранявате стойности, които могат да се променят с времето.
• Използвайте персонализирани команди: Създавайте персонализирани команди, за да капсулирате повторно използваема логика и да направите тестовете си по-четливи.
• Изолирайте тестовете: Всеки тест трябва да е независим от другите тестове. Избягвайте да разчитате на състоянието на приложението от предишни тестове.
• Почиствайте след тестовете: Нулирайте състоянието на приложението след всеки тест, за да осигурите, че последващите тестове започват от чиста основа.
• Използвайте Data Атрибути: Използвайте data атрибути (например, `data-testid`), за да избирате елементи във вашите тестове. Data атрибутите е по-малко вероятно да се променят от CSS класове или ID, което прави вашите тестове по-устойчиви на промени в UI.
• Избягвайте изрични изчаквания: Cypress автоматично изчаква елементите да станат видими или интерактивни. Избягвайте да използвате изрични изчаквания (например, `cy.wait()`), освен ако не е абсолютно необходимо.
• Тествайте потребителски потоци: Фокусирайте се върху тестването на потребителски потоци, а не на отделни компоненти. Това ще ви помогне да гарантирате, че вашето приложение работи правилно от гледна точка на потребителя.
• Изпълнявайте тестове редовно: Интегрирайте Cypress тестовете във вашия CI/CD пайплайн и ги изпълнявайте редовно, за да улавяте грешки в ранен етап от процеса на разработка.

Напреднали Cypress техники

Заглушаване и мокиране (Stubbing and Mocking)

Cypress ви позволява да заглушавате мрежови заявки и отговори, което ви дава възможност да симулирате различни сценарии и да тествате обработката на грешките във вашето приложение. Това е особено полезно за тестване на функции, които разчитат на външни API или услуги.

За да заглушите мрежова заявка, можете да използвате командата `cy.intercept()`. Например, кодът по-долу заглушава GET заявка към `/api/users` и връща фалшив отговор:

            
cy.intercept('GET', '/api/users', {
  statusCode: 200,
  body: [
    { id: 1, name: 'John Doe' },
    { id: 2, name: 'Jane Doe' }
  ]
}).as('getUsers')

            

              
                Copy
              
            
          

След това можете да изчакате прихванатата заявка, като използвате `cy.wait('@getUsers')`, и да проверите дали вашето приложение обработва фалшивия отговор правилно.

Работа с Local Storage и Cookies

Cypress предоставя команди за взаимодействие с local storage и cookies. Можете да използвате тези команди, за да задавате, получавате и изчиствате local storage и cookies във вашите тестове.

За да зададете елемент в local storage, можете да използвате командата `cy.window()`, за да получите достъп до обекта на прозореца и след това да използвате метода `localStorage.setItem()`. Например:

            
cy.window().then((win) => {
  win.localStorage.setItem('myKey', 'myValue')
})

            

              
                Copy
              
            
          

За да получите елемент от local storage, можете да използвате командата `cy.window()` и след това метода `localStorage.getItem()`. Например:

            
cy.window().then((win) => {
  const value = win.localStorage.getItem('myKey')
  expect(value).to.equal('myValue')
})

            

              
                Copy
              
            
          

За да зададете cookie, можете да използвате командата `cy.setCookie()`. Например:

            
cy.setCookie('myCookie', 'myCookieValue')

            

              
                Copy
              
            
          

За да получите cookie, можете да използвате командата `cy.getCookie()`. Например:

            
cy.getCookie('myCookie').should('have.property', 'value', 'myCookieValue')

            

              
                Copy
              
            
          

Обработка на качване на файлове

Cypress предоставя плъгин, наречен `cypress-file-upload`, който опростява качването на файлове във вашите тестове. За да инсталирате плъгина, изпълнете следната команда:

            npm install -D cypress-file-upload
            

              
                Copy
              
            
          

След това добавете следния ред към вашия файл `cypress/support/commands.js`:

            
import 'cypress-file-upload';

            

              
                Copy
              
            
          

След това можете да използвате командата `cy.uploadFile()`, за да качите файл. Например:

            
cy.get('input[type="file"]').attachFile('example.txt')

            

              
                Copy
              
            
          

Работа с IFrames

Тестването на IFrames може да бъде сложно, но Cypress предоставя начин за взаимодействие с тях. Можете да използвате командата `cy.frameLoaded()`, за да изчакате IFrame да се зареди, и след това да използвате командата `cy.iframe()`, за да получите обект на документа на IFrame.

            
cy.frameLoaded('#myIframe')
cy.iframe('#myIframe').find('button').click()

            

              
                Copy
              
            
          

Cypress и непрекъсната интеграция/непрекъснато разгръщане (CI/CD)

Интегрирането на Cypress във вашия CI/CD пайплайн е от съществено значение за осигуряване на качеството на вашето приложение. Можете да изпълнявате Cypress тестове в режим без глава във вашата CI/CD среда. Ето как:

1. Инсталиране на Cypress: Уверете се, че Cypress е инсталиран като зависимост във вашия проект.
2. Конфигуриране на CI/CD: Конфигурирайте вашия CI/CD пайплайн да изпълнява Cypress тестове след всяка компилация.
3. Изпълнение на Cypress без глава: Използвайте командата `cypress run`, за да изпълнявате Cypress тестове в режим без глава.

Примерен CI/CD конфигурация (използвайки GitHub Actions):

            
name: Cypress Tests

on:
  push:
    branches: [main]
  pull_request:
    branches: [main]

jobs:
  cypress-run:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v3
      - uses: actions/setup-node@v3
        with:
          node-version: 16
      - name: Install dependencies
        run: npm install
      - name: Cypress run
        uses: cypress-io/github-action@v5
        with:
          start: npm start
          wait-on: 'http://localhost:3000'

            

              
                Copy
              
            
          

Тази конфигурация ще изпълнява Cypress тестове всеки път, когато код се изпрати към `main` клона или се създаде pull заявка срещу `main` клона. Действието `cypress-io/github-action` опростява процеса на изпълнение на Cypress тестове в GitHub Actions.

Дебъгване на Cypress тестове

Cypress предоставя отлични инструменти за дебъгване, които да ви помогнат да идентифицирате и отстраните проблеми във вашите тестове. Ето няколко съвета за дебъгване на Cypress тестове:

• Използвайте Cypress Test Runner: Cypress Test Runner предоставя визуален интерфейс за изпълнение и дебъгване на вашите тестове. Можете да преминавате през тестовете си команда по команда, да инспектирате състоянието на приложението и да преглеждате подробни съобщения за грешки.
• Използвайте командата `cy.pause()`: Командата `cy.pause()` спира изпълнението на вашия тест и ви позволява да инспектирате състоянието на приложението в инструментите за разработчици на браузъра.
• Използвайте командата `cy.debug()`: Командата `cy.debug()` извежда избрания елемент в конзолата, което ви позволява да инспектирате неговите свойства и атрибути.
• Използвайте инструментите за разработчици на браузъра: Инструментите за разработчици на браузъра предоставят богатство от информация за вашето приложение, включително DOM, мрежови заявки и конзолни записи.
• Четете внимателно съобщенията за грешки: Cypress предоставя подробни съобщения за грешки, които могат да ви помогнат да идентифицирате причината за грешката. Обърнете внимание на съобщението за грешка и пътеката на стека.

Cypress срещу други тестови рамки

Въпреки че Cypress е мощна рамка за E2E тестване, е важно да разберете как се сравнява с други популярни опции. Ето кратък преглед:

• Selenium: Selenium е широко използвана рамка за автоматизирано тестване. Макар и гъвкав и поддържащ множество езици, той може да бъде сложен за настройка и поддръжка. Cypress предлага по-опростено и приятелско изживяване за разработчици, особено за JavaScript-базирани приложения.
• Puppeteer: Puppeteer е Node библиотека, която предоставя API от високо ниво за контрол на headless Chrome или Chromium. Той е отличен за извличане на данни (scraping) и автоматизиране на браузърни задачи, но може да изисква повече ръчна конфигурация в сравнение с Cypress за E2E тестване.
• Playwright: Playwright е друга рамка за автоматизация на браузъри, разработена от Microsoft. Тя споделя сходства с Puppeteer, но предлага по-широка поддръжка на браузъри. Cypress има уникален дебъгер за пътуване във времето и по-интегрирано тестово изживяване.

Изборът на рамка зависи от специфичните нужди и изисквания на вашия проект. Cypress е отличен избор за модерни уеб приложения, които изискват бързо, надеждно и приятелско към разработчиците E2E тестване.

Реални примери за Cypress в действие

Нека разгледаме няколко реални примера за това как Cypress може да се използва за тестване на различни видове уеб приложения:

Тестване на E-commerce приложение

Можете да използвате Cypress, за да тествате различни потребителски потоци в e-commerce приложение, като например:

• Търсене на продукти
• Добавяне на продукти в количката
• Плащане и извършване на поръчка
• Управление на настройките на акаунта

Ето пример за Cypress тест, който проверява дали потребител може успешно да добави продукт в количката си:

            
it('Adds a product to the cart', () => {
  cy.visit('/products')
  cy.get('.product-card').first().find('button').click()
  cy.get('.cart-count').should('have.text', '1')
})

            

              
                Copy
              
            
          

Тестване на социално медийно приложение

Можете да използвате Cypress, за да тествате потребителски взаимодействия в социално медийно приложение, като например:

• Създаване на нова публикация
• Харесване на публикация
• Коментиране на публикация
• Следване на други потребители

Ето пример за Cypress тест, който проверява дали потребител може успешно да създаде нова публикация:

            
it('Creates a new post', () => {
  cy.visit('/profile')
  cy.get('#new-post-textarea').type('Hello, world!')
  cy.get('#submit-post-button').click()
  cy.get('.post').first().should('contain', 'Hello, world!')
})

            

              
                Copy
              
            
          

Тестване на Банково приложение

За банкови приложения Cypress може да се използва за тестване на критични функционалности като:

• Сигурно влизане
• Проверка на баланса на сметката
• Прехвърляне на средства
• Управление на бенефициенти

Тест за проверка на прехвърляне на средства може да изглежда така (с подходящо заглушаване за сигурност):

            
it('Transfers funds successfully', () => {
  cy.visit('/transfer')
  cy.get('#recipient-account').type('1234567890')
  cy.get('#amount').type('100')
  cy.intercept('POST', '/api/transfer', { statusCode: 200, body: { success: true } }).as('transfer')
  cy.get('#transfer-button').click()
  cy.wait('@transfer')
  cy.get('.success-message').should('be.visible')
})

            

              
                Copy
              
            
          

Заключение

Cypress е мощна и гъвкава рамка за E2E тестване, която може да ви помогне да гарантирате качеството и надеждността на вашите уеб приложения. Неговият приятелски API за разработчици, мощни функции и отлична производителност го правят популярен избор сред разработчици и QA инженери по целия свят. Като следвате най-добрите практики, очертани в това ръководство, можете да пишете ефективни Cypress тестове, които ще ви помогнат да улавяте грешки в ранен етап от процеса на разработка и да доставяте висококачествен софтуер на вашите потребители.

Тъй като уеб приложенията продължават да се развиват, значението на E2E тестването ще нараства. Приемането на Cypress и интегрирането му във вашия работен процес за разработка ще ви даде възможност да изграждате по-стабилни, надеждни и удобни за потребителя уеб преживявания.